<template>
	<div class="myorder">
        <el-row>
            <el-col :span="5">
                    <div class="menu">
                        <h3>订单服务</h3>
                            <el-menu default-active="1" class="el-menu-vertical-demo">
                                <el-menu-item index="1" @click="activeIndexShow = 0">我的订单<i class="el-icon-arrow-right pull-right"></i></el-menu-item>
                                <el-menu-item index="2" @click="activeIndexShow = 1">导航二<i class="el-icon-arrow-right pull-right"></i></el-menu-item>
                           </el-menu>
                    </div>
            </el-col>
            <el-col :span="18">
                    <div style="margin-left:40px;" class="rightContainer">
                        <div v-if="activeIndexShow === 0">
                                <div class="myorderHeader">
                                    <h3>我的订单 <span>共<b style="color:red;">2</b>订单</span></h3>
                                </div>
                                <div>
                                    <div>
                                        <div class="myOrder-number">
                                            <b>订单编号：118181292827393298</b>
                                            <span>2018-01-12 12:00:12</span>
                                        </div>
                                        <div class="myOrder-number-box">
                                            <el-row>
                                              <el-col :span="14">
                                                  <div class="bg-purple">
                                                        <dl>
                                                            <dt><img src="../../../assets/img/img.jpg" alt=""></dt>
                                                            <dd>
                                                                <p>Redis从入门到高可用，分布式实践Redis从入门到高可用，分布式实践</p>
                                                                <span class="red">￥200</span>
                                                            </dd>
                                                        </dl>
                                                  </div>
                                              </el-col>
                                              <el-col :span="4">
                                                <div class="red" style="
                                                        border-left:1px #cacaca solid;
                                                        border-right:1px #cacaca solid;
                                                        height:138px;text-align: center;line-height: 130px;font-size: 18px;"
                                                >
                                                    ￥200
                                                </div>
                                              </el-col>
                                              <el-col :span="6">
                                                <div class="paymentBtn">
                                                    <div v-if="orderBtn">
                                                        <div>
                                                            <el-button type="danger" @click="$router.push('/homePage/payConter')">立即支付</el-button>
                                                        </div>
                                                        <div>
                                                            <el-button type="text" @click="close">取消订单</el-button>
                                                        </div>
                                                    </div>
                                                    <div v-if="closeOrder" style="color:#ccc;line-height: 130px;"> 已关闭</div>
                                                </div>
                                              </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div v-if="activeIndexShow === 1">
                            备用tab切换
                        </div>
                    </div>
            </el-col>

        </el-row>
	</div>
</template>

<script>
	export default{
		name: 'myorder',
		data() {
	      return {
	      	navText: [
                {text: '我的订单'},
                {text: '我的订单'},
                {text: '我的订单'},
            ],
            activeIndexShow:0,
            closeOrder: false,
            orderBtn: true,
	      }
	    },
		methods: {

            close() {
                this.$confirm('确定要取消订单吗', '取消订单', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.closeOrder = true;
                    this.orderBtn = false;
                }).catch(() => {});
            }

	    }
	}

</script>

<style lang="less">
    .myorder{
	    width: 1100px;
	    margin:85px auto 0;
	    .menu{
            width: 200px;
            height: 400px;
            margin-right: 48px;
            width: 216px;
            padding: 24px 0px;
            box-sizing: border-box;
            background: #f3f5f7;
            float: left;
            h3{
                width: 180px;
                margin: 0 auto;
                border-bottom:1px solid #d9dde1;
                margin-bottom: 10px;
                padding-bottom: 20px;
            }
            li{
                color:#333;
            }

        }
        .el-menu--dark{
            background: none;
        }
        .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item i{
          line-height:56px;
         }
         .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active {
             color: #fff;
             background-color: #f01414;
         }
         .el-menu--dark .el-menu-item:hover, .el-menu--dark .el-submenu__title:hover{
            background: #d1dbe5;
         }
        .el-menu-item [class^=el-icon-] {
            margin-right: 5px;
            width: 24px;
            text-align: center;
            font-size: 12px;
            float: right;
        }

	    .rightContainer{
            width: 835px;
            line-height: 60px;
            .myOrder-number{
                margin-top:20px;
                width: 100%;
                background: #e8ecf1;
                line-height: 40px;
                font-size: 12px;
                b{
                    margin:0 10px;
                }
                span{
                    font-size: 12px;
                    color:#999;
                }
		    }
		.bg-purple{
			dl{
                cursor: pointer;
                margin-top: 23px;
				dt{
					float: left;
					img{
						display: inline-block;
						width: 160px;
						height: 90px;
                        margin-left: 10px;
					}
				}
				dd{
					width: 270px;
					margin-left: 20px;
					p{
						margin:0;
						padding:0;
						line-height: 20px;
					}
					float: left;
				}
			}

		}

	}
	.myorderHeader{
		h3{
			width:100%;
			font-size:18px;
			span{
				font-size: 12px;color:#999;
			}
		}
	}
    .myOrder-number-box{
        background: #fff;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    }
    .paymentBtn{
        text-align: center;
        .el-button--danger{
            margin-top: 30px;
        }
        .el-button--text{
            font-size: 12px;
        }
    }



}

</style>